<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="" alt="">
    <div>111</div>
    <span>222</span>
    <button>按钮</button>
    <script>
        /* 
            页面初始化事件的两种方式
                1.onload：这种方式会加载所有的标签元素和样式之后才会被触发，速度较慢，不会被执行多次，谁最后被加载就调用谁
                2.DOMContentLoaded：这种方式在加载完基础的标签元素后就会被触发,不必等待样式，图表的完全加载，速度加快

                 注册事件的补充知识点：
                1. 如果基于事件属性的方式注册，有相同的代码会使用最后加载的代码。并且只会执行一次
                2. 如果是基于监听器的方式注册事件，那么注册几个就会执行几个。
        */
        const btnObj = document.querySelector("button");
        btnObj.onclick = function () {
            console.log("btn_onclick1");
        }

        btnObj.onclick = function () {
            console.log("btn_onclick2");
        }

        btnObj.onclick = function () {
            console.log("btn_onclick3");
        }

        btnObj.addEventListener("click", function () {
            console.log("click1");
        });

        btnObj.addEventListener("click", function () {
            console.log("click2");
        });


        //    基于属性的初始化页面不会被执行多次
        window.onload = function () {
            console.log("onload111");
        }

        window.onload = function () {
            console.log("onload222");
        }

        window.onload = function () {
            console.log("onload333");
        }

        //    添加监听器的初始化页面会被执行多次
        window.addEventListener("load", function () {
            console.log("load111");
        })

        window.addEventListener("load", function () {
            console.log("load222");
        })

        window.addEventListener("load", function () {
            console.log("load333");
        })

        //加载速度最快，并且可以多次执行
        window.addEventListener("DOMContentLoaded", function () {
            console.log("DOMContentLoaded444");
        })

        window.addEventListener("DOMContentLoaded", function () {
            console.log("DOMContentLoaded555");
        })

        window.addEventListener("DOMContentLoaded", function () {
            console.log("DOMContentLoaded666");
        })
    </script>
</body>

</html>